<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    /* 
        align-self是对align-items的补充，只能作用于侧轴

        align-items可以控制子盒子在侧轴方向上的排布,但它是所有的子盒子一起排.
        假设我现在有三个子盒子主轴在水平方向,侧轴从父盒子的起点开始排序,但是这三个盒子一起排,我想让最后的一个盒子从终点开始排align-self可以做到
        我想交换两个盒子的位置可以使用 order属性 默认是0 -1可以提权

    */

    .box {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        height: 300px;
        width: 80%;
        border: 2px dashed black;
        margin: 0 auto;
    }


    .box div {
        height: 100px;
        width: 300px;
        background-color: pink;
    }


    .box div:nth-child(3) {
        align-self: flex-end;
    }

    .box div:nth-child(2) {
        order: -1;
    }


</style>

<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>

</html>